<template>
  <div class="nav-box">
    <div class="nav-top">
      <div
        :style="{
          backgroundImage: `url(${sellerList_x.avatar})`,
          filter: `blur(2px)`,
          height: '100%',
        }"
      ></div>
      <div>
        <div class="top-center">
          <div class="shop-avatar">
            <img :src="sellerList_x.avatar" />
          </div>
          <div class="shop-info">
            <div class="name">
              <van-icon name="new-arrival" size="40px" />
              <h4>{{ sellerList_x.name }}</h4>
            </div>

            <p class="description">
              {{ sellerList_x.description }} 送达时间：{{
                sellerList_x.deliveryTime
              }}min
            </p>
            <div class="supports">
              <p class="supports-text">{{ sellerList_x.supports.join(",") }}</p>
              <span class="span-num"
                >{{ sellerList_x.supports.length }}个
                <van-icon name="arrow" size="16px" color="#FFF" />
              </span>
            </div>
          </div>
        </div>
        <div class="top-bottom">
          <p class="icon"><van-icon name="comment" size="20px" /></p>
          <p class="bulletin">{{ sellerList_x.bulletin }}</p>
          <p class="triangle">
            <van-icon name="arrow" size="16px" color="#FFF" />
          </p>
        </div>
      </div>
    </div>
    <div class="nav-center">
      <label
        :class="curTitle == '/nav/order' ? 'selected' : ''"
        @click="clickTab('/nav/order')"
        >商品</label
      >
      <label
        :class="curTitle == '/nav/evaluation' ? 'selected' : ''"
        @click="clickTab('/nav/evaluation')"
        >评价</label
      >
      <label
        :class="curTitle == '/nav/merchant' ? 'selected' : ''"
        @click="clickTab('/nav/merchant')"
        >商家</label
      >
    </div>
    <!-- 设置动画效果 -->
    <transition name="slide-fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { shopseller } from "../api/api";
export default {
  data() {
    return {
      curTitle: "/nav/order", //当前的url地址
    };
  },

  async created() {
    let res = await shopseller();
    // 将商家列表的值放到vuex里
    this.$store.commit("initsellerList", res.data.data);
    console.log(res.data.data);
  },

  methods: {
    // 点击切换菜单栏
    clickTab(url) {
      this.curTitle = url;
      this.$router.push(url); //实现路由的跳转
    },
  },

  computed: {
    // 取vuex里商家列表的值
    sellerList_x() {
      return this.$store.state.sellerList;
    },
  },
};
</script>
<style lang="less" scoped>
@base: #560510;
.selected {
  color: #ffc300;
  border-bottom: 4px solid #ffc300;
}
.nav-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  // 头部
  .nav-top {
    height: 160px;
    width: 100%;
    background-color: @base;
    position: relative;
    color: #fff;
    .top-center {
      width: 90%;
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      .shop-avatar {
        width: 100px;
        height: 100px;

        img {
          width: 100px;
          height: 100px;
          border-radius: 10px;
        }
      }
      .shop-info {
        flex: 1;
        padding-left: 12px;
        .name {
          display: flex;
          h4 {
            padding: 8px;
          }
        }
        .description {
          padding-bottom: 8px;
        }
        .supports {
          display: flex;
          .supports-text {
            // 注意，在这里设置宽度 才可以实现
            width: 170px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .span-num {
            width: 60px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #575757;
            border-radius: 20px;
          }
        }
      }
    }
    .top-bottom {
      // padding: 0 10px;
      width: 100%;
      height: 40px;
      line-height: 40px;
      color: #fff;
      background-color: #48151a;
      position: absolute;
      bottom: 0px;
      display: flex;
      justify-content: space-around;
      .icon {
        flex: 8%;
        text-align: center;
        line-height: 50px;
      }
      .bulletin {
        flex: 84%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 16px;
      }
      .triangle {
        flex: 8%;
      }
    }
  }
}

.nav-center {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  height: 30px;
  font-size: 18px;
  label {
    padding: 0 10px 8px 10px;
  }
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0 ease;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(50px);
  opacity: 0;
}
</style>
